.bs-menu{
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
  color: #333;
  transition: width .3s;
}
.bs-menu-item,
.bs-submenu-title{
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1rem;
  margin: 0;
  list-style-type: disc;
  list-style-position: inside;
  transition: color .3s,background .3s,padding .1s cubic-bezier(.215,.61,.355,1);
  //background-color: #fff;
  white-space: nowrap;
  cursor: pointer;
  &.is-disabled{
    cursor: not-allowed;
    color: #bcbcbc;
  }
  &::after{
    position: absolute;
    content: ' ';
    transition: transform .15s;
  }
}
.bs-menu-item-icon{
  //margin-right: 0.625rem;
  & + .bs-menu-item-title,
  & + .bs-submenu-title-content{
    padding-left: 0.625rem;
  }
}
.bs-submenu-title-content{
  flex: 1;
  margin-right: 0.625rem;
}
.bs-submenu-arrow{
  margin-left: auto;
  .bs-submenu-arrow-icon{
    transition: transform .3s;
  }
}
.bs-submenu-content{
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
}
.bs-submenu-content-dropdown{
  position: absolute;
  min-width: 11.25rem; // 180px
  max-height: calc(100vh - 7.5rem); // 7.5rem = 120px
  border-radius: 0.125rem;
  box-shadow: 0 0 0.5rem rgba(0,0,0,0.15);
  overflow-y: auto;
  background-color: #fff;
}
.bs-submenu{
  padding: 0;
  margin: 0;
  &:not(.bs-submenu-selected):not(.bs-submenu-disabled):hover{
    &>.bs-submenu-title{
      color: var(--primary);
    }
  }
  &.bs-submenu-selected{
    &>.bs-submenu-title{
      color: var(--primary);
    }
  }
  &.bs-submenu-expanded{
    &>.bs-submenu-title{
      .bs-submenu-arrow-icon{
        transform: rotate(-180deg);
      }
    }

    /*.bs-submenu-content{
      display: block;
    }*/
  }
  &.bs-submenu-disabled{
    &>.bs-submenu-title {
      cursor: not-allowed;
      color: #bcbcbc;
    }
  }
  &.bs-submenu-display-with-dropdown:not(.bs-submenu-horizontal.bs-submenu-first-level){
    .bs-submenu-arrow{
      .bs-submenu-arrow-icon{
        transform: rotate(-90deg);
      }
    }
    &.bs-submenu-expanded{
      &>.bs-submenu-title{
        color: var(--primary);
      }
    }
  }
}
.bs-submenu-content-dropdown{
  /*&.bs-placement-left,
  &.bs-placement-right{
    &.bs-slide-enter-from,
    &.bs-slide-leave-to{
      transform: scale(0);
    }
    &.bs-slide-enter-to,
    &.bs-slide-leave-from{
      transform: scale(1);
    }
  }*/

  .bs-menu-item{
    &:not(.is-disabled):hover{
      background-color: #eef5fe;
    }
    &::after{
      display: none;
      top: 0;
      right: -1px;
      bottom: 0;
      width: 0.125rem;
      transform: scaleY(0);
      background-color: var(--primary);
    }
    &.is-selected{
      display: block;
      color: var(--primary);
      background-color: #e8f5fd;
      &::after{
        transform: scaleY(1);
      }
    }
  }
}
.bs-menu-item-group-title{
  height: 2.5rem;
  line-height: 2.5rem;
  padding-left: 1rem;
  color: #868686;
  font-size: 0.875rem;
}
.bs-menu-item-group-content{
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
}
.bs-menu-horizontal {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #f2f2f2;
  .bs-menu-item{
    &:not(.is-disabled):hover{
      color: var(--primary);
    }
    &::after{
      left: 1rem;
      right: 1rem;
      bottom: -1px;
      height: 0.125rem;
      transform: scaleX(0);
      background-color: var(--primary);
    }
    &.is-selected{
      color: var(--primary);
      &::after{
        transform: scaleX(1);
      }
    }
  }
}
.bs-menu-vertical{
  border-right: 1px solid #f2f2f2;
  .bs-menu-item{
    &:not(.is-disabled):hover{
      background-color: #eef5fe;
    }
    &::after{
      top: 0;
      right: -1px;
      bottom: 0;
      width: 0.125rem;
      transform: scaleY(0);
      background-color: var(--primary);
    }
    &.is-selected{
      color: var(--primary);
      background-color: #e8f5fd;
      &::after{
        transform: scaleY(1);
      }
    }
  }
  .bs-submenu-content{
    background-color: #fcfcfc;
  }

  &.bs-menu-collapsed{
    width: 5rem!important;
    &>.bs-menu-item{
      text-overflow: clip;
      overflow: hidden;
      &.has-icon{
        padding: 0 50%;
      }
      &::after{
        right: 0;
      }
      .bs-menu-item-icon{
        margin-left: -0.5rem;
        & + .bs-menu-item-title{
          opacity: 0;
        }
      }
    }
    &>.bs-submenu{
      &>.bs-submenu-title{
        text-overflow: clip;
        overflow: hidden;
        &.has-icon{
          padding: 0 50%;
        }
        .bs-menu-item-icon{
          margin-left: -0.5rem;
          & + .bs-submenu-title-content{
            opacity: 0;
          }
        }
        .bs-submenu-arrow{
          opacity: 0;
        }
      }
      &>.bs-submenu-content{
        display: none;
      }
    }
  }
}
